<template>
	<div>
		<block v-for="(item, index) in nodes" :key="index">
			<uList :item="item" :space="space" :preview="preview" :selectable="selectable" :imgList="imgList" />
		</block>
	</div>
</template>

<script>
	import { html2nodes } from "./parser.js";
	import uList from "./parse_list.vue";

	export default {
		components: {
			uList,
		},
		props: {
			html: {
				type: String,
				default: "",
			},

			space: {
				type: String,
				default: "",
			},

			selectable: {
				type: Boolean,
				default: true,
			},

			preview: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				imgList: [],
				nodes: [],
			};
		},
		watch: {
			html: {
				handler(html) {
					var that = this;
					if (typeof html == "string") {
						html2nodes(html, {
							preview: this.preview,
							selectable: this.selectable,
						}).then(function (e) {
							that.imgList = e.imgList;
							that.nodes = e.nodes;
						});
					} else if (typeof html == "object") {
						that.imgList = html.imgList;
						that.nodes = html.nodes;
					} else if (typeof html == "array") {
						that.imgList = [];
						that.nodes = html;
					}
				},
				immediate: true
			}
		},
	};
</script>
